<style lang="scss">
  *{
    padding: 0;
    margin: 0;
  }
  .clear{
    *zoom:1;
  }
  .clear:after{
    visibility:hidden;
    content:"";
    display:block;
    clear:both;
    height:0;
  }
  .video_list{
    width: 600px;
    height: 270px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }
  .video_ls{
    width: 500%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*transition: 2s;*/
  }
  .video_shows{
    width: 20%;
    height: 100%;
    float: left;
    /*transform: translate3d(-600px,0,0);*/
  }
  .div_videos{
    width: 100%;
    height: 100%;
  }
  .div_videos img{
    width: 100%;
    height: 100%;
  }
</style>
<template>
  
  <!-- <div>
    <div class="video_list">
      <div class="video_ls clear"  ref="videoLs">
        <div class="video_shows" >
          <div v-for="i in [1]">
            <div v-if="currentSrc.type == 'image'" class="div_videos" >
                <img :src="currentSrc.url" :ref="0"/>
              </div>
              <div v-else="currentSrc.type == 'video'" class="div_videos" >
                <video-player class="video-player vjs-custom-skin"
                              :ref="0"
                              :options="playerOptions"
                              :playsinline="true"
                              @play="onPlayerPlay($event)"
                              @pause="onPlayerPause($event)"
                              @ended="onPlayerEnded($event)"
                              @loadeddata="onPlayerLoadeddata($event)"
                              @waiting="onPlayerWaiting($event)"
                              @playing="onPlayerPlaying($event)"
                              @timeupdate="onPlayerTimeupdate($event)"
                              @canplay="onPlayerCanplay($event)"
                              @canplaythrough="onPlayerCanplaythrough($event)"
                              @ready="playerReadied"
                              @statechanged="playerStateChanged($event)"
                >
                </video-player>
              </div>
          </div>
          
        </div>
      </div>
    </div>
    <div style="position:absolute;left:44%;margin-top:10px">
      <el-button-group>
        <el-button type="primary" :disabled="preButtonFlag" @click="preAction" icon="el-icon-arrow-left" >PRE</el-button>
        <el-button type="primary" :disabled="nextButtonFlag" @click="nextAction" >NEXT<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
  </div> -->
  
  <div>
    <div class="video_list">
      <div class="video_ls clear"  ref="videoLs">
        <div class="video_shows" v-for="(item,index) in srclist">
          <div v-if="item.imsrc" class="div_videos" >
            <img :src="item.imsrc" :ref="index"/>
          </div>
          <div v-if="item.videosrc"  class="div_videos" >
            <video-player class="video-player vjs-custom-skin"
                          :ref="index"
                          :options="playerOptions"
                          :playsinline="true"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"
                          @ready="playerReadied"
                          @statechanged="playerStateChanged($event)"
            >
            </video-player>
          </div>
        </div>
      </div>
    </div>
    <div style="position:absolute;left:47%;margin-top:10px">
      <el-button-group>
        <!-- <el-button type="primary" :disabled="preButtonFlag" @click="preAction" icon="el-icon-arrow-left" >PRE</el-button> -->
        <el-button type="primary" :disabled="nextButtonFlag" @click="nextAction" >NEXT<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
    <div style="margin-top:50px" >
      <el-form label-width="80px">
        <el-form-item label="标题：">
          <el-input v-model="title" :disabled="true" ></el-input>
        </el-form-item>
        <el-form-item label="品牌：">
          <el-row>
            <el-col :span="12">
              <el-input v-model="brand" :disabled="true" ></el-input>
            </el-col>
            <template v-if="brandFlag == 1" >
              <el-col :span="12">
                <i class="el-icon-star-on" style="color:red;"></i>
              </el-col>
            </template>            
          </el-row>
        </el-form-item>
        <el-form-item label="分类：">
          <el-input v-model="category" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核失败原因">
          <el-input type="textarea" v-model="reason"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="onCheckOk(1)">审核通过</el-button>
      <el-button type="danger" @click="onCheckOk(2)">审核不通过</el-button>
      
    </div>
  </div>
  
</template>

<script>
  export default {
    data() {
      return {
        // videojs options
        playerOptions: {
            height: '338',
            muted: true,//开启声音
            autoplay: false,
            loop: false,
            language: 'en',
            playbackRates: [0.7, 1.0, 1.5, 2.0],
            aspectRatio: '16:9',
            sources: [{
            type: "video/mp4",
            src: "",
          }],
          //poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
          },
        refslist:[],//对象列表
        srclist:[//视频图片列表
          /*{videosrc:"http://beebuy.igfd.group/assets/15259413978eEIh20180510163636.mp4"}, 
          {imsrc:"http://beebuy.igfd.group/assets/1521622349IYPH520180321165229.jpg"},                   
          {videosrc:"http://beebuy.igfd.group/assets/1525945631KAqts20180510174710.mp4"}*/
        ],
        num:0,
        time:'',
        preButtonFlag: true,
        nextButtonFlag: false,
        currentSrc:{},
        title: '',
        brand: '',
        category: '',
        id: '',
        reason: '',
        brandFlag: 0
      }
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 50 - 30 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      }
    },
    mounted() {
      this.id = this.$route.query.id.toString();
      this.init(this.id);
    },
    methods: {
      // tabs, 删除tab
      removeTabHandle (tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        }
      },
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.mainTabsActiveName)
      },
      onCheckOk(state) {
        var _This = this;
        if (this.reason == '' && state == 2) {
          this.$message.error('请填写审核失败原因');
          return;
        }

        this.$confirm(`确定进行审核通过操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/biz/publishCustomers/auth/${this.id}?state=${state}&reason=${_This.reason}`),
            method: 'post',
            data: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.tabsCloseCurrentHandle();
                  this.$router.push({ path: '/biz-publishCustomers' });
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      init(id) {

        this.$http({
          url: this.$http.adornUrl("/biz/publishCustomers/getItem"),
          method: "get",
          params: this.$http.adornParams({
            id: id
          })
        }).then(({ data }) => {
          console.log(data);
          if (data && data.code === 0) {
            this.srclist = data.data.files;
            if(this.srclist[0].videosrc){//第一个是视频
              this.playerOptions.sources[0].src=this.srclist[this.num].videosrc
            }else{//第一个是图片
              this.countPlay();
            }

            this.title = data.data.title;
            this.brand = data.data.brand;
            this.category = data.data.category;
            this.brandFlag = data.data.brandFlag;
          }
        });

        
      },
      nextAction() {
        this.countPlay();
      },
      startPlay(){//图片
        this.countPlay();
        this.time=setInterval(()=>{
          this.countPlay();
          if(this.srclist[this.num].videosrc){
            clearInterval(this.time);
            this.playerOptions.sources[0].src=''
            this.playerOptions.sources[0].src=this.srclist[this.num].videosrc
          }
        },3000)
      },
      countPlay(){
        this.num++;
        this.$refs.videoLs.style.left=-600*(this.num)+"px";
        this.$refs.videoLs.style.transition="2s"
        if(this.num>=this.srclist.length){
          this.num=0;
          this.$refs.videoLs.style.left="0px"
          this.$refs.videoLs.style.transition="0s"
        }

        //后加
        if(this.srclist[this.num].videosrc){
            this.playerOptions.sources[0].src=''
            this.playerOptions.sources[0].src=this.srclist[this.num].videosrc
        }
      },
      onPlayerPlay(player) {
      },
      onPlayerPause(player) {
      },
      onPlayerEnded(player) {//播放完毕之后 src被替换
        //this.countPlay()
        /*this.playerOptions.sources[0].src=''
        this.playerOptions.sources[0].src=this.srclist[this.num].videosrc
        if(this.srclist[this.num].imsrc){
          this.startPlay()
        }*/
      },
      onPlayerLoadeddata(player) {
      },
      onPlayerWaiting(player) {
      },
      onPlayerPlaying(player) {
      },
      onPlayerTimeupdate(player) {
      },
      onPlayerCanplay(player) {
      },
      onPlayerCanplaythrough(player) {
      },
      // or listen state event
      playerStateChanged(playerCurrentState) { //播放的进程中就是一直在播放
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready 从第几秒开始播放
      playerReadied(player) {
        // seek to 10s
        // console.log('example player 1 readied', player)
        // player.currentTime(10)
        // console.log('example 01: the player is readied', player)
      }
    }
  }
</script>
